<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>菜单管理</title>
		<script src="/static/skin.js"></script>
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		
		<link rel="stylesheet" href="https://cdn.staticfile.org/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css">
		<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
		<script src="/static/basic/plugins/easyui/jquery.easyui.min.js"></script>
		<script src="https://cdn.staticfile.org/zTree.v3/3.5.40/js/jquery.ztree.all.min.js"></script>
		<script src="/static/init.js?v=1205"></script>
		<script src="/static/searchEdit.js?v=0326"></script>
		<script src="/static/basic/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="/static/basic/plugins/easyui/themes/icon.css" >
		<link rel="stylesheet" href="/static/m.css?v=171023">
		<style type="text/css">
			table.ets td input{width:270px}
		</style>
	</head>
	<body>
		<div id="main-layout" class="easyui-layout" data-options="fit:true" style="height:620px;width:100%;">
			<div region="west" data-options="split:true" style="width:350px;height:100%">
				<div data-options="fit:true,border:false" class="easyui-panel" title="" style="padding-top:7px;padding-left:8px;">
					<div id="menuTree" class="ztree"></div>
				</div>
			</div>
			<div region="center" style="height:100%;width:100%">
				<div data-options="fit:true,border:false" class="easyui-panel" title="">
					<div data-options="fit:true,border:false" class="easyui-panel" title="菜单详细信息" style="padding-top:14px;padding-left:0px;">
						<form id="menuForm" method="post" disabled="true">
							<table class="ets" style="height:100%;width:500px;padding-left:0px">
								<!-- <tr>
									<td>父级:</td>
									<td><input id="menuForm_parent_name" type="text" name="parent_name" class="easyui-textbox" data-options="readonly:true"></input></td>
								</tr> -->
								<tr>
									<td>名称:</td>
									<td><input type="text" name="name" class="easyui-textbox"></input></td>
								</tr>
								<!-- <tr>
									<td>类型:</td>
									<td><input type="text" name="type"></input></td>
								</tr> -->
								<tr>
									<td>描述:</td>
									<td><input type="text" name="remark" class="easyui-textbox"></input></td>
								</tr>
								<tr>
									<td>地址:</td>
									<td><input type="text" name="path" class="easyui-textbox"></input></td>
								</tr>
								<tr>
									<td>序号:</td>
									<td><input type="text" name="order_no" class="easyui-textbox"></input></td>
								</tr>
								<tr>
									<td>是否启用:</td>
									<td><input type="text" name="status" id="ddd"></input></td>
								</tr>
							</table>
							<input type="hidden" name="parent_id" value="0"></input>
							<input type="hidden" name="id"></input>
						</form>
						<div id="btnFunc" style="height:45px;padding-top:20px;padding-left:20px">
							<a id="saveButton" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" >保存</a>
							<a id="cancelButton" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" >取消</a>
						</div>
					</div>

				</div>
			</div>
			<div region="north" data-options="split:false,border:false" style="width:100%;height:40px;">
				<div style="width:100%;height:100%">
					<div data-options="fit:true,border:false" title="" style="padding:5px">
						<a href="javascript:void(0)" id="addButton" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">添加</a>
						<a href="javascript:void(0)" id="deleteButton" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'">删除</a>
						<a href="javascript:void(0)" id="btn1" class="easyui-linkbutton" data-options="plain:true">权限设置</a>
						<!-- <a href="javascript:void(0)" id="addButton" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">修改</a>
						 -->
					</div>
				</div>
			</div>
		</div>
<div id="dlg1">
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'center'">
			<table id="gridList2"></table>
		</div>
		<div data-options="region:'west'" style="width:50%;">
			<table id="gridList1"></table>
		</div>
	</div>
</div>
<div id="searchbar1">
		<div class="maction">
			<a href="javascript:void(0)" id="removeButton1" class="easyui-linkbutton" data-options="plain:true,iconCls:'fa fa-trash-o mbutton'">删除</a>
		</div>
	</div>
<div id="searchbar2">
	<div class="maction">
		<a href="javascript:void(0)" id="removeButton1" class="easyui-linkbutton" data-options="plain:true">确定选择</a>
	</div>
	<form id="searchForm">
		权限编码:<input id="search-status" name="status" class="easyui-textbox">
		<a id="searchButton" href="javascript:void(0)"
			class="easyui-linkbutton"
			data-options="plain:true,iconCls:'icon-search'">查询</a>
	</form>
</div>
<script>
var zTreeMenu;
var menuRoot={ id:0, parent_id:null, text:"导航菜单", open:true};
var ztreeSeting = {
			/*async: {
				enable: true,
				contentType:"application/json",
				url:"/authenticated/ajax/select_menu"
			},*/
			view: { showLine : false },
			callback:{
				//单击
				onClick:onClick
			},
			data: {
				key:{
					name:"text"//节点名称的属性名称
				},
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "parent_id",
					rootPId: null
				}
			}

};
var options1={
		page_id:165,
		grid_id:"gridList1",
		toolbar_id:"searchbar1",
		//saveurl:"/authenticated/tsCompany/saveUserLogin",
		//idField:"company_id",
		showCheckbox:false,//是否显示checkbox
		rownumbers:false,
		autoload:false,
		sqlname:"grid_sys_permission_menu_rel"
	};
var options2={
		idField:"permission",	
		page_id:166,
		grid_id:"gridList2",
		toolbar_id:"searchbar2",
		autoload:false,
		sqlname:"grid_166_sys_permission"
	};
var comboboxDatas;
//document ready
$(function(){
	$('#addButton').bind('click', addMenu);//添加按钮绑定事件
	$('#deleteButton').bind('click', deleteMenu);//添加按钮绑定事件
	$('#saveButton').bind('click', saveMenu);//保存按钮绑定事件
	
	initmenu();
	
	//=[{'id':'enabled','text':'启用'},{'id':'disable','text':'禁用'}]
	$.ajax({
		type: "post",
		contentType:"application/json",
		url: "/authenticated/grid/column/sys_menu",
		data:null,
		dataType:"json",
		success: function(result){
			if(result.success){
				comboboxDatas=result.data;
				initComboboxDatas();
			}
			
		},
		error: function(){
			
		}
	});
	grid1=new uniontrip.datagrid.searchEdit(options1);
	grid2=new uniontrip.datagrid.searchEdit(options2);
	$('#btn1').bind('click', function(){
		if(nodeid){
			$('#dlg1').dialog('open');
			grid1.grid.gridParam.menu_id=nodeid;
			grid2.grid.gridParam.menu_id=nodeid;
			grid1.load();
			grid2.load();
		}else{
			$.messager.alert("提示", "请选择菜单");
		}
		
	});
	dialogHeight=$(window).height()*0.8;
	//alert($(window).height());
	$('#dlg1').dialog({
		title:"权限设置",
		cls:"miframePanel",
		width:'80%',
		height:dialogHeight,
		modal:true,
		closed:true,
		maximizable:true
	});
});

function onClick(event, treeId, treeNode){
	$('#menuForm').form('clear');
	nodeid=treeNode.id;
	if(nodeid){
		
		$.ajax({
			type: "post",
			contentType:"application/json",
			url: "/authenticated/ajax/map/select_get_menu",
			data:JSON.stringify({id:nodeid}),
			dataType:"json",
			success: function(result){
				if(result.success){
					$('#menuForm').form('load',result.data);
				}else{
					$.messager.alert("提示", result.message);
				}
			},
			error: function(){
				$.messager.alert("提示", "请求失败！");
			}
		});
	}
}
/**
 * 初始化form表单组件
 */
function initComboboxDatas(){
	//初始化
	var status=$("#menuForm :input[name=status]").first();
	//var type=$("#menuForm :input[name=type]").first();
	status.combobox({
    	panelHeight:'auto',
		editable:false,
    	valueField:'code_value',
		textField:'code_name',
        data:comboboxDatas.status
    });
	
	/*type.combobox({
    	panelHeight:'auto',
		editable:false,
    	valueField:'code_value',
		textField:'code_name',
        data:comboboxDatas.type
    });*/
}

/**
 * 
 */
function addMenu(){
	$('#menuForm').form('clear');
	var selectedNodes = zTreeMenu.getSelectedNodes();
	//var newNode={name:"新建菜单"};
	var parent_id=$("#menuForm :input[name=parent_id]").first();
	//var parent_name=$("#menuForm_parent_name");
	if(selectedNodes.length==0){//添加一级菜单
		parent_id.val(0);
		//parent_name.textbox("setValue","导航菜单");
	}else{
		var selectedNode=selectedNodes[0];
		if(selectedNode.level==0){
			parent_id.val(0);
			//parent_name.textbox("setValue","导航菜单");
		}else{
			parent_id.val(selectedNode.id);
			//parent_name.textbox("setValue",selectedNode.name);
		}
		
	}
}
/**
 * 删除菜单
 */
function deleteMenu(){
	var selectedNodes = zTreeMenu.getSelectedNodes();
	if(selectedNodes.length==0){//添加一级菜单
		$.messager.alert("提示", "请选择删除的菜单！");
	}else{
		var selectedNode=selectedNodes[0];
		if(selectedNode.isParent){
			$.messager.alert("提示", "父菜单不允许删除！");
			return;
		}
		$.messager.confirm('删除确认', '是否确定删除?', function(r){
			if (r){
				console.log(selectedNode);
				$.ajax({
					type: "delete",
					contentType:"application/json",
					url: "/authenticated/menu/"+selectedNode.id,
					dataType:"json",
					success: function(result){
						if(result.success){
							$.messager.alert("提示", "删除成功！<br>");
							initmenu();
						}else{
							$.messager.alert("提示", "删除失败！<br>"+result.message);
						}
					},
					error: function(){
						$.messager.alert("提示", "请求失败！");
					}
				});
			}
		});
		
		
	}
}
function saveMenu(){
	var formObject=$("#menuForm").serializeObject();
	$.ajax({
		type: "post",
		contentType:"application/json",
		url: "/authenticated/menu/update",
		data:JSON.stringify(formObject),
		dataType:"json",
		success: function(result){
			if(result.success){
				$.messager.alert("提示", "保存成功！");
				initmenu();
			}else{
				$.messager.alert("提示", "保存失败！");
			}
		},
		error: function(){
			$.messager.alert("提示", "请求失败！");
		}
	});
}

function initmenu(){
	$.ajax({
		type: "post",
		contentType:"application/json",
		async:false,
		url: "/authenticated/menu/query",
		data:null,
		dataType:"json",
		success: function(result){
			if(result.success){
				zNodes=result.data;
				zNodes.push(menuRoot);
				zTreeMenu=$.fn.zTree.init($("#menuTree"), ztreeSeting,zNodes);
				//zTreeMenu.expandAll(true);
			}
		},
		error: function(){
			
		}
	});
}
</script>
	</body>
</html>